<script setup>
import { ref, onMounted } from 'vue';
import router from '@/router'; // 引入路由，用于未登录跳转
import { ElButton, ElTable, ElTableColumn, ElMessage, ElDialog, ElForm, ElFormItem, ElInput, ElDatePicker, ElPagination } from 'element-plus';
import api from '@/api/useradoptBooking_api.js';
import loginApi from '@/api/userlogin_api.js'; // 引入登录信息接口（与布局页面一致）

// 表格数据
const tableData = ref([]);
const total = ref(0);

// 弹窗控制
const addWinVisible = ref(false);

// 查询条件
const searchObj = ref({
  current: 1,
  limit: 10,
  adopt_booking_user_name: '', // 预约用户名（当前登录用户）
  adopt_booking_date: ''       // 预约日期（可选筛选）
});

// 表单数据（新增预约时使用）
const addObj = ref({
  adopt_booking_user_name: '',
  adopt_booking_date: ''
});

// 登录用户信息（与布局页面一致，初始为空）
const loginAdmin = ref({});

// 页面初始化：先校验登录状态，再加载预约数据
onMounted(async () => {
  // 1. 先判断登录状态（复用布局页面逻辑）
  const isLogin = await checkLogin();
  if (!isLogin) return; // 未登录则终止后续操作

  // 2. 登录成功：预设用户名到查询条件和表单
  searchObj.value.adopt_booking_user_name = loginAdmin.value.user_name;
  addObj.value.adopt_booking_user_name = loginAdmin.value.user_name;

  // 3. 加载当前用户的预约数据
  await search();
});

// 校验登录状态（完全复用布局页面的 getLogin 逻辑）
const checkLogin = async () => {
  // 第一步：检查 token 是否存在
  const token = localStorage.getItem("token");
  if (!token) {
    ElMessage.warning('请先登录');
    router.push("/userlogin"); // 无 token 跳转登录页（与布局一致）
    return false;
  }

  // 第二步：调用接口获取用户信息（包含 user_name）
  try {
    const res = await loginApi.logininfo(); // 与布局页面一致的接口
    loginAdmin.value = res; // 赋值用户信息（含 user_name）
    return true; // 登录成功
  } catch (error) {
    // 接口调用失败（如 token 过期），清除 token 并跳转登录
    ElMessage.error('登录状态失效，请重新登录');
    localStorage.removeItem("token");
    router.push("/userlogin");
    return false;
  }
};

// 获取表格数据（携带当前登录用户名筛选）
const search = async () => {
  try {
    const result = await api.page(searchObj.value);
    tableData.value = result.data;
    total.value = result.count;
  } catch (error) {
    ElMessage.error('获取预约记录失败');
    console.error(error);
  }
};

// 分页处理
const handleSizeChange = (val) => {
  searchObj.value.limit = val;
  search();
};
const handleCurrentChange = (val) => {
  searchObj.value.current = val;
  search();
};

// 触发查询
const handlerSearch = () => {
  searchObj.value.current = 1;
  search();
};

// 打开新增预约弹窗
const openAddDialog = () => {
  // 校验登录状态（防止用户手动刷新后状态丢失）
  if (!loginAdmin.value.user_name) {
    ElMessage.warning('请先登录');
    router.push("/userlogin");
    return;
  }
  addObj.value = {
    adopt_booking_user_name: loginAdmin.value.user_name,
    adopt_booking_date: ''
  };
  addWinVisible.value = true;
};

// 提交新增预约
const addCommit = async () => {
  if (!addObj.value.adopt_booking_date) {
    ElMessage.warning('请选择预约日期');
    return;
  }

  try {
    await api.add(addObj.value);
    addWinVisible.value = false;
    search(); // 新增后刷新列表
    ElMessage.success('预约成功');
  } catch (error) {
    ElMessage.error('预约失败，请重试');
    console.error(error);
  }
};
</script>

<template>
  <!-- 查询表单 -->
  <el-form :inline="true" :model="searchObj" style="margin-top: 10px">
    <el-form-item label="预约用户名">
      <el-input
          v-model="searchObj.adopt_booking_user_name"
          placeholder="请输入用户名"
          clearable
          readonly
      />
    </el-form-item>
    <el-form-item label="预约日期">
      <el-date-picker
          v-model="searchObj.adopt_booking_date"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handlerSearch">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="openAddDialog">新增预约</el-button>
    </el-form-item>
  </el-form>

  <!-- 表格展示（只显示当前用户的预约） -->
  <el-table :data="tableData" border style="width: 100%; margin-top: 10px">
    <el-table-column label="预约用户名" width="120">
      <template #default="scope">
        {{ scope.row.adopt_booking_user_name }}
      </template>
    </el-table-column>
    <el-table-column label="预约日期" width="180">
      <template #default="scope">
        {{ scope.row.adopt_booking_date }}
      </template>
    </el-table-column>
<!--    <el-table-column label="操作" width="100">-->
<!--      <template #default="scope">-->
<!--        <el-button type="text">查看</el-button>-->
<!--      </template>-->
<!--    </el-table-column>-->
  </el-table>

  <!-- 分页 -->
  <el-pagination
      v-model:current-page="searchObj.current"
      v-model:page-size="searchObj.limit"
      :page-sizes="[5, 10, 20]"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 10px; text-align: right"
  />

  <!-- 新增预约弹窗 -->
  <el-dialog v-model="addWinVisible" title="新增预约记录" width="400">
    <el-form :model="addObj" label-width="100px">
      <el-form-item label="预约用户名" prop="adopt_booking_user_name">
        <el-input
            v-model="addObj.adopt_booking_user_name"
            placeholder="预约人姓名"
            readonly
        />
      </el-form-item>
      <el-form-item label="预约日期" prop="adopt_booking_date">
        <el-date-picker
            v-model="addObj.adopt_booking_date"
            type="date"
            placeholder="选择预约日期"
            value-format="YYYY-MM-DD"
            :disabled-date="(time) => time < new Date()"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addWinVisible = false">取消</el-button>
      <el-button type="primary" @click="addCommit">提交预约</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-table {
  --el-table-row-hover-bg-color: #f0f7ff;
}
</style>